<template>
    <!-- energyBalance -->
    <div style="position: relative">
        <el-button class="fenpei-btn" @click="handleClick">能源分配</el-button>
        <div class="top-box">
            <p style="font-size: 18px">杭机股份</p>
            <p style="font-size: 14px; margin-top: 8px">{{ total }}kw.h</p>
        </div>
        <div class="top-line"></div>
        <div class="middle-line"></div>
        <div class="fenpei">
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">金工车间</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a1 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a1 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">重装车间</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a2 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a2 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">装配车间</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a3 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a3 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">办公楼1层</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a4 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a4 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">办公楼2层</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a5 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a5 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">办公楼3层</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a6 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a6 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">宿舍楼</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a7 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a7 }}%</div>
                </div>
            </div>
            <div class="mind-map">
                <div class="container">
                    <div class="arrow-down">
                        <div class="line"></div>
                        <div class="triangle"></div>
                    </div>
                    <div class="box">
                        <p style="font-size: 18px">食堂</p>
                        <p style="font-size: 14px; margin-top: 8px">
                            {{ (total * a8 * 0.01).toFixed(2) }}kw.h
                        </p>
                    </div>
                    <div style="color: #1677ff">{{ a8 }}%</div>
                </div>
            </div>
        </div>
        <el-dialog title="能源分配" :visible.sync="dialogVisible" width="35%" append-to-body="true">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="金工车间">
                    <el-input v-model="form.name1"></el-input>
                </el-form-item>
                <el-form-item label="重装车间">
                    <el-input v-model="form.name2"></el-input>
                </el-form-item>
                <el-form-item label="装配车间">
                    <el-input v-model="form.name3"></el-input>
                </el-form-item>
                <el-form-item label="办公楼1层">
                    <el-input v-model="form.name4"></el-input>
                </el-form-item>
                <el-form-item label="办公楼2层">
                    <el-input v-model="form.name5"></el-input>
                </el-form-item>
                <el-form-item label="办公楼3层">
                    <el-input v-model="form.name6"></el-input>
                </el-form-item>
                <el-form-item label="宿舍楼">
                    <el-input v-model="form.name7"></el-input>
                </el-form-item>
                <el-form-item label="食堂">
                    <el-input v-model="form.name8"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    computed: {},
    data() {
        return {
            total: 156806,
            dialogVisible: false,
            a1: 0,
            a2: 0,
            a3: 0,
            a4: 0,
            a5: 0,
            a6: 0,
            a7: 0,
            a8: 0,
            form: {
                name1: "",
                name2: "",
                name3: "",
                name4: "",
                name5: "",
                name6: "",
                name7: "",
                name8: "",
            },
        };
    },
    created() {
        this.WitGlobal.requestCode("witznzz.hj.openapi.db.energy.select_energy", {}).then((res) => {
            this.form.name1 = res.data[0].a1;
            this.form.name2 = res.data[0].a2;
            this.form.name3 = res.data[0].a3;
            this.form.name4 = res.data[0].a4;
            this.form.name5 = res.data[0].a5;
            this.form.name6 = res.data[0].a6;
            this.form.name7 = res.data[0].a7;
            this.form.name8 = res.data[0].a8;
            this.a1 = parseFloat(this.form.name1 || 0);
            this.a2 = parseFloat(this.form.name2 || 0);
            this.a3 = parseFloat(this.form.name3 || 0);
            this.a4 = parseFloat(this.form.name4 || 0);
            this.a5 = parseFloat(this.form.name5 || 0);
            this.a6 = parseFloat(this.form.name6 || 0);
            this.a7 = parseFloat(this.form.name7 || 0);
            this.a8 = parseFloat(this.form.name8 || 0);
        });
    },
    methods: {
        handleClick() {
            this.dialogVisible = true;
        },
        handleOk() {
            this.dialogVisible = false;
            this.a1 = parseFloat(this.form.name1 || 0);
            this.a2 = parseFloat(this.form.name2 || 0);
            this.a3 = parseFloat(this.form.name3 || 0);
            this.a4 = parseFloat(this.form.name4 || 0);
            this.a5 = parseFloat(this.form.name5 || 0);
            this.a6 = parseFloat(this.form.name6 || 0);
            this.a7 = parseFloat(this.form.name7 || 0);
            this.a8 = parseFloat(this.form.name8 || 0);
            let param = {
                a1: this.form.name1,
                a2: this.form.name2,
                a3: this.form.name3,
                a4: this.form.name4,
                a5: this.form.name5,
                a6: this.form.name6,
                a7: this.form.name7,
                a8: this.form.name8,
            };
            this.WitGlobal.requestCode("witznzz.hj.openapi.db.energy.update_energy", param).then(
                (res) => { }
            );
        },
    },
};
</script>

<style scoped lang="scss">
.fenpei {
    display: flex;
    justify-content: space-around;
    margin-top: 350px;
    width: 100%;
}

.mind-map {
    width: 10%;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* 箭头和盒子之间的距离 */
}

.arrow-down {
    display: inline-block;
    position: relative;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1677ff;
    /* 三角形颜色 */
}

.line {
    width: 2px;
    /* 线条宽度 */
    height: 60px;
    /* 线条高度 */
    background-color: #1677ff;
    /* 线条颜色 */
    position: absolute;
    bottom: 2px;
    left: 50%;
    /* 居中对齐 */
    transform: translateX(-50%);
}

.box {
    width: 100%;
    height: 70px;
    border: 2px solid #1677ff;
    /* 蓝色边框 */
    border-radius: 12px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-box {
    width: 180px;
    height: 80px;
    border: 2px solid #1677ff;
    /* 蓝色边框 */
    background-color: #1677ff;
    border-radius: 12px;
    font-size: 16px;
    color: white;
    position: absolute;
    top: -194px;
    left: 50%;
    /* 居中对齐 */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle-line {
    width: 87.5%;
    /* 线条宽度 */
    height: 2px;
    /* 线条高度 */
    background-color: #1677ff;
    /* 线条颜色 */
    position: absolute;
    top: -54px;
    left: 50%;
    /* 居中对齐 */
    transform: translateX(-50%);
}

.top-line {
    width: 2px;
    /* 线条宽度 */
    height: 60px;
    /* 线条高度 */
    background-color: #1677ff;
    /* 线条颜色 */
    position: absolute;
    top: -114px;
    left: 50%;
    /* 居中对齐 */
    transform: translateX(-50%);
}

.fenpei-btn {
    width: 120px;
    height: 48px;
    background-color: #67c23a !important;
    border: 0px;
    padding-top: 20px;
    border-radius: 12px;
    font-size: 18px !important;
    color: white !important;
    position: absolute;
    top: -174px;
    left: 60%;
}

>>>.el-dialog__body {
    padding: 0 50px 0 40px;
}

>>>.el-dialog__header {
    text-align: start;
    padding: 20px 20px 20px 50px;
}

>>>.W-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    /* 居中对齐 */
    transform: translateX(-50%), translateY(-50%);
}

/* >>>.v-modal {
		z-index: -1 !important;
	} */
</style>
